<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h2>判断</h2>
    <p v-if="age < 5">婴儿</p>
    <p v-else-if="age < 18">少年</p>
    <p v-else-if="age < 30">青年</p>
    <p v-else-if="age < 55">中年</p>
    <p v-else>老年</p>

    <h2>循环数组</h2>
    <ul>
        <li v-for="item in hobbies">{{item}}</li>
    </ul>
    <h2>循环对象数组</h2>
    <ul>
        <li v-for="user in users">{{user.id}}-{{user.name}}-{{user.salary}}</li>
    </ul>
    <h2>循环数字</h2>
    <!--
        for(int i = 1; i <= num; i++){}
    -->
    <ul>
        <li v-for="i in num">{{i}}</li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: "#d1",
        data:{
            age: 20,
            hobbies: ["吃饭","睡觉","打豆豆","学Java"],
            num: 10,
            users:[
                {
                    id: 1,
                    name: "李小白",
                    salary: 8000.0
                },
                {
                    id: 2,
                    name: "虞小姬",
                    salary: 9000.0
                },
                {
                    id: 3,
                    name: "曹小操",
                    salary: 7000.0
                }
            ]
        }
    })
</script>
</html>